<template>
    <div>
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1413785395,3730319804&fm=26&gp=0.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2028746254,1988422365&fm=26&gp=0.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3224600793,2545201449&fm=26&gp=0.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=842705034,1320535105&fm=26&gp=0.jpg" alt=""></van-swipe-item>
       </van-swipe>
       <div class="content">
           <div class="container">
               <p class="head">
                   <span class="dote"></span>
                   常用服务
               </p>
               <div class="box">
                   <ul>
                       <li v-for="(item,index) in list" :key="index" @click="go(item.click)">
                           <van-icon :name="item.src" size="30"/>
                           {{item.text}}
                       </li>
                   </ul>


               </div>
           </div>
           <div class="container">
               <p class="head">
                   <span class="dote" style="background-color:#f8bb08;"></span>
                   其他服务
               </p>
               <div class="box" style="height:160px;">
                <van-empty description="敬请期待" image-size="90"/>
               </div>
           </div>
           <div class="foot">
               <van-notice-bar
                left-icon="volume-o"
                text="借助国家新能源发展的宏伟目标，九五电力迎潮而上，充分发挥自身技术优势，立志于为新能源领域的发展保驾护航，为人类能源绿色梦想贡献力量"
                />
           </div>
           
       </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
import { Notify } from 'vant';
import {getCookie} from 'Utils/cookie'
Vue.use(Lazyload);
export default {
    data() {
    return {
        class:'',
        list:[{
            src:'cart',
            text:'物料出库',
            click:'/materiel'
        },{
            src:'todo-list',
            text:'日常巡检',
            click:'/Inspection'
        },
        {
            src:'send-gift',
            text:'物资申请',
            click:'/goods'
        },
        ]
     
    };
  },
  methods:{
      go:function(url){
          console.log(url,this.class)
           if(this.class == 101){
               if(url == '/goods'){
                   Notify({ type: 'danger', message: '您的权限不足' });
               }else{
                   this.$router.push(url)
               }

           }else if(this.class == 102){
               if(url == '/materiel' || url == '/Inspection'){
                   Notify({ type: 'danger', message: '您的权限不足' });
               }else{
                   this.$router.push(url)
               }

           }else if(this.class == 103){
                this.$router.push(url)
           }
        //   this.$router.push(url)
      }
  },
  mounted(){
      this.class = getCookie('class')
  }
}
</script>
<style lang="scss" scoped>
 .my-swipe .van-swipe-item {
    height: 250px;
    width: 100%;
  }
  img{
      height: 250px;
      width: 100%;
  }
  .content{
      width: 100%;
      height:417px;
      background-color: #f1f1f1;
      overflow: scroll;
  }
  .head{
      .dote{
          display: inline-block;
          width: 7px;
          height: 7px;
          background-color: #0081ff;
          border-radius: 50px;
          margin-left:10px;
      }
      width: 100%;
      height:50px;
      background-color: #fff;
      line-height: 50px;
      border-bottom: 1px solid #f1f1f1
  }
  .box{
      margin-top: -16px;
      height: 80px;
      background-color: #fff;
      ul{
          display: flex;
          flex-direction:row;
      }
      li{
          list-style: none;
         border-right: 1px solid #f1f1f1;
         width: 80px;
         height:80px;
         padding-left:15px;
         .van-icon{
             display: block;
             margin: 10px 10px 10px 16px;
         }
      }
  }
  .foot{
      height: 40px;
      width:100%;
      position: absolute;
      bottom: 0px;
  }

    
</style>